<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图坐标转换器</title>
    <script src="./coordtransform.js"></script>
    <script src="./jquery-3.2.1.js"></script>
    <style>
        .flex {
            display: flex;
        }
        .left {
            display: flex;
            flex-direction: column;
        }
    </style>
</head>
<body>
    <div class="flex">
        <div class="left">
            <select name="" id="leftO">
    <!-- bd09togcj02: ƒ bd09togcj02(bd_lon, bd_lat)
    gcj02tobd09: ƒ gcj02tobd09(lng, lat)
    gcj02towgs84: ƒ gcj02towgs84(lng, lat)
    wgs84togcj02: ƒ wgs84togcj02(lng, lat) -->
                <option value="bd09">百度</option>
                <option value="gcj02">国测局</option>
                <option value="wgs84">天地图84</option>
            </select>
            <textarea name="" id="left" cols="50" rows="50"></textarea>
        </div>
        <div class="left">
            <select name="" id="righO">
                <option value="bd09">百度</option>
                <option value="gcj02">国测局</option>
                <option value="wgs84">天地图84</option>
            </select>
            <textarea name="" id="right" cols="50" rows="50"></textarea>
        </div>
    </div>
    <button onclick="z()">转换</button>
    <button onclick="b()">街道->区级</button>
    <button onclick="c()">重新计算中心点</button>
    
    <script>
        coordtransform.bd09towgs84 = function (lng, lat) {
            var gcj = coordtransform.bd09togcj02(lng, lat);
            return coordtransform.gcj02towgs84(gcj[0], gcj[1]);
        }
        coordtransform.wgs84tobd09= function (lng, lat) {
            var gcj = coordtransform.wgs84togcj02(lng, lat);
            return coordtransform.gcj02tobd09(gcj[0], gcj[1]);
        }
        function z () {
            var left = $('#left').val().replace(/\s/g, '');
            var leftO = $('#leftO').val();
            var righO = $('#righO').val();
            if (leftO == righO) {
                let right = left.replace(/\[([0-9]*[.]?[0-9]*){1},([0-9]*[.]?[0-9]*){1}\]/g, function (d) {
                    var lng = d.split(',')[0].slice(1);
                    var lat = d.split(',')[1].slice(0, -1);
                    return JSON.stringify([parseFloat(lng.slice(0, 10)), parseFloat(lat.slice(0, 10))]);
                });
                $('#right').val(right);
            } else {
                var foo = coordtransform[leftO + 'to' + righO];
                var right = left.replace(/\[([0-9]*[.]?[0-9]*){1},([0-9]*[.]?[0-9]*){1}\]/g, function (d) {
                    var lng = d.split(',')[0].slice(1);
                    var lat = d.split(',')[1].slice(0, -1);
                    var str = JSON.stringify(foo(lng, lat)).split(',');
                    return str[0].slice(0, 12) + "," + str[1].slice(0, 11) + "]";
                });
                $('#right').val(right);
            }
        }
    
        function b () {
            var json = JSON.parse($('#right').val());
            var obj = {
                cp: json.cp,
                gridName: '*' + json.gridName,
                gridNo: json.gridNo.slice(0, 6) + '000000',
                type: "FeatureCollection",
                zoom: 14,
                features: []
            };
    
            obj.features.push({
                geometry: {type: "FeatureCollection", coordinates: []},
                id: json.gridNo,
                properties: {name: json.gridName, special: false, cp: [json.cp.lng, json.cp.lat], childNum: "1"},
                type: "FeatureCollection",
                features: json.features
            });
            $('#right').val(JSON.stringify(obj));
        }
    
        function c () {
            var json = JSON.parse($('#right').val());
            json.features[0].features.forEach(n => {
                var lngs = n.geometry.coordinates[0].map(n => n[0]);
    
                var lats = n.geometry.coordinates[0].map(n => n[1]);
    
                var lng =_.mean(lngs);
                var lat = _.mean(lats);
    
                n.properties.cp = [lng, lat];
            });
            $('#right').val(JSON.stringify(json))
        }
    </script>
    </body>
    </html>